<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/*获得class名称是div1下的第一个子元素*/
			.div1>p:first-child {
				color: yellow;
			}
			/*最后一个子元素*/
			.div1>p:last-child{
				color: aqua;
			}
			/*具体的某一个子元素*/
			/*.div1>p:nth-child(2){
				background-color: #00FFFF;
			}*/
			.div1>p:nth-child(even){
				background-color: red;
			}
			/*偶行*/
			.div1>p:nth-child(odd){
				background-color: yellow;
			}
			/*获得空行的元素对象*/
			.div1>p:empty{
				height: 50px;
				background-color: burlywood;
			}
			/*获得焦点执行的样式*/
			/*input:focus{
				width: 300px;
				height: 100px;
			}*/
			/*点击时变大*/
			input:checked{
				height: 20px;
				width: 20px;
			}
		</style>
	</head>
	<body>
		<div class="div1">
			<p>1</p>
			<p>2</p>
			<p>3</p>
			<p></p>
			<p>4</p>
			<p>5</p>
		</div>
		<hr />
		<input type="text" name="" id="" value="" />
		<hr />
		男：<input type="radio" name="sex" id="sex" value="" />
		女：<input type="radio" name="sex" />
	</body>
</html>
